<template>
  <div class="wik-pagination">
    <div class="wik-pagination-title">
      <span>
        第
        <i>{{ (currentPage - 1) * pageSize + 1 }} - {{ currentPage * pageSize }}</i>
        条
      </span>
      <span>
        共计
        <i>{{ total }}</i>
        条
      </span>
    </div>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 50, 100]"
      :background="true"
      layout=" sizes,prev, pager, next, total, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { useData } from "@table/hooks/useData";
const { eventBus } = useData();

let currentPage = defineModel("currentPage", { type: Number, default: 1 });
let pageSize = defineModel("pageSize", { type: Number, default: 20 });
defineProps({
  total: {
    type: Number,
    default: 400
  }
});
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`);
  pageSize.value = val;
  eventBus.emit("refresh");
};
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;

  eventBus.emit("refresh");
};
</script>
<style lang="scss" scoped>
.wik-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  border-radius: 6px;
  &-title {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 14px;
    color: rgb(153 153 153);
    i {
      font-style: normal;
      color: #333333;
    }
  }
}
</style>
